<template>
    <div class="forbid-select full-in-main">
        <el-scrollbar class="full-percent">
            <div class="api-content" v-waterfall="mobile ? 140 : 280">
                <div style="padding: 5px;" v-for="(item, index) in api" :span="4" :key="index" class="api-body">
                    <div style="box-shadow: 1px 1px 10px -5px #7a7575;border-radius: 5px;" @click="goInterface(index)">
                        <div style="padding: 10px">
                            <div style="text-align: center">{{ index + 1 }}</div>
                            <div style="text-align: center;margin-top: 10px">{{ item.interface_name }}</div>
                            <div style="text-align: center;margin-top: 10px" class="no-wrap">{{ item.comments }}</div>
                            <div style="text-align: center;margin-top: 10px;">
                                <div class="flex-display-center">
                                    <div class="api-run">
                                        总调用次数:
                                    </div>
                                    <count-to class="number" :start=0 :end=parseInt(item.count) :duration='3000'
                                        ref="count" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </el-scrollbar>
        <transition name="animate__animated " enter-active-class="animate__jackInTheBox "
            leave-active-class="animate__flipOutX">
            <interface-doc :interface-info="interfaceInfo" @close="close" v-if="showApiDoc" />
        </transition>
    </div>
</template>

<script setup>
import { useRequest } from "@usehook"
import { onBeforeRouteLeave } from "vue-router"
import { deepClone, mobile } from "@/utils/tools"
import { apiPrefix } from "@/utils/constant"
import { storeToRefs, useUserStore } from "@/pinia"

let api = $ref([])
let showApiDoc = $ref(false)
let interfaceInfo = $ref({})

const close = () => {
    showApiDoc = false
    interfaceInfo = {}
}

const userStore = useUserStore()

const { getUserInfo } = storeToRefs(userStore)

const goInterface = (index) => {
    const cloneApi = deepClone(api[index])
    cloneApi.params = cloneApi.params ? JSON.parse(cloneApi.params) : {}
    cloneApi.paramsKey = Object.keys(cloneApi.params)

    if (cloneApi.params) {
        let params = cloneApi.params
        let p = []
        for (let p2 of Object.values(params)) {
            if (p2.required !== 3) {
                p2.value = p2.default
                p.push(p2)
            }
        }

        if (!params.hasOwnProperty("token")) {
            p.push({ name: "token", content: "接口Token，个人中心查看获取", required: 2, value: "" })
        }

        if (!params.hasOwnProperty("page") && cloneApi.page) {
            p.push({
                name: "page",
                content: "页码, 0表示不开启分页, 大于0开启分页功能",
                required: 2,
                value: 0
            })
        }

        if (!params.hasOwnProperty("limit") && cloneApi.page) {
            p.push({ name: "limit", content: "每页显示的数据量", required: 2, value: 10 })
        }

        const tokenParam = p.find(e => e.name === "token")
        if (!tokenParam.value && tokenParam.required === 1) {
            tokenParam.value = getUserInfo.value.apiToken
        }

        cloneApi.params = p
    }

    interfaceInfo = cloneApi
    showApiDoc = !showApiDoc
}

onMounted(() => {
    useRequest({ url: apiPrefix + "/interface/all", method: "POST" }).then(resp => {
        if (resp && resp.status) {
            api = resp.data
        }
    })
})

onBeforeRouteLeave((to, from, next) => {
    close()
    nextTick(() => {
        next()
    })
})
</script>

<style lang="scss" scoped>
:deep(.api-run) {
    margin-right: 5px;
}

:deep(.api-body) {
    transition: all .2s ease-in;
}

.mobile .api-body {
    min-width: 50%;
}
</style>

<style scoped>
:deep(.el-dialog__body) {
    padding: 5px;
}

:deep(.param_name) {
    width: 100px;
    height: 32px;
    line-height: 32px;
    text-align: right;
    margin: 0 15px;
}

:deep(.el-dialog__footer) {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 10px;
    text-align: left;
    width: 100%;
}

:deep(.dialog-footer) {
    position: relative;
    display: block;
    width: 100%;
}

:deep(.api_button) {
    font-size: 25px;
}

:deep(.el-dialog__header) {
    padding: 0;
}

:deep(.run) {
    position: absolute;
    right: 0;
}

:deep(.api-body:hover) {
    transform: translateX(2px) translateY(-2px) scale(1.02);
    color: #8aaad9;
    transition: all .2s ease-in;
}

:deep(.api-content) {
    padding: 20px 30px;
}

.mobile .api-content {
    padding: 5px;
}

.mobile .api-body:hover {
    transform: none;
    color: inherit;
}
</style>